import React, { Component } from "react";
import { Tabs, NavBar } from "antd-mobile";
import * as service from "../../api/index";
import "../../styles/Dingdan.scss";
class Dingdan extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
    };
  }

  async componentDidMount() {
    var res = await service.user_orderlist({
      userid: localStorage.getItem("userid"),
    });

    this.setState({ list: res.data.data });
  }

  //返回
  fanhui() {
    this.props.history.go(-1);
  }
  render() {
    return (
      <div className="Dingdan">
        <div className="header">
          {" "}
          <NavBar
            onBack={() => {
              this.fanhui();
            }}
          >
            我的订单
          </NavBar>
        </div>
        <Tabs>
          <Tabs.Tab title="    全部订单" key="quanbu">
            <div className="list">
              {this.state.list.map((item, index) => {
                return (
                  <div className="item" key={item.orderid}>
                    <img src={item.img1} alt="" />
                    <div className="item_right">
                      <p>{item.proname}</p>

                      <div className="item_right_buttom">
                        <p>{item.originprice}</p>
                        <div className="zhifu">去支付</div>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </Tabs.Tab>
          <Tabs.Tab title="待付款" key="fukuan">
            待付款
          </Tabs.Tab>
          <Tabs.Tab title="待收货" key="shouhuo">
            待收货
          </Tabs.Tab>
          <Tabs.Tab title="待评价" key="pingjia">
            待评价
          </Tabs.Tab>
        </Tabs>
      </div>
    );
  }
}

export default Dingdan;
